<template>
    <div class="graph-box">
        <div class="detail-box">
            <div class="left-box">
                <div class="left-content">
                    <div class="class-basic">
                        <img src="@/assets/classdetail.png" alt="">
                    </div>
                    <div class="basic-title">《产品结构设计基础》</div>
                    <div class="basic-tage">
                        <span class="orange">必修课</span>
                        <span class="blue">学时：16</span>
                        <span class="green">学分：2</span>
                    </div>
                    <div class="class-desc">
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">课程简介</div>
                        </div>
                        <div class="desc">
                            面向工业设计/产品设计方向的基础课程，系统讲授产品结构设计的核心概念、材料与成形工艺、连接与装配、尺寸公差与公差配合、可制造性（DFM/DFA）与可靠性设计等内容。课程以“理论讲解 + 案例分析 + 小型实作”推进，帮助学生建立从需求到结构方案、从三维建模到装配验证、从工程图纸到样机调试的完整认知。
                        </div>
                    </div>
                    <div class="desc-table">
                        <div class="table-item" v-for="(item,index) in classItem" :key="index">
                            <div class="left">{{ item.title }}</div>
                            <div class="right">{{ item.desc }}</div>
                        </div>
                    </div>
                    <div class="edit-btn">
                        <!-- <el-button type="primary" @click="editShow(0)">
                            <el-icon size="20"><Edit /></el-icon>
                            <span>编辑</span>
                        </el-button> -->
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="right-content">
                    <div class="right-class-box">
                        <div class="tops instructions">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程说明</div>
                            </div>
                            <div class="edit-btn">
                                <!-- <el-button type="primary" @click="editShow(1)">
                                    <el-icon size="20"><Edit /></el-icon>
                                    <span>编辑</span>
                                </el-button> -->
                            </div>
                        </div>
                        <div class="desc">
                            本课程围绕“功能实现—结构拆解—装配验证—工程交付”的主线展开。上半程聚焦结构设计基础：常用材料与工艺（注塑/压铸/钣金/3D打印）、力学直觉与壁厚/肋筋/脱模与拔模角、常见连接（卡扣、螺纹、铰链、焊接、粘接）与容错设计。下半程强调工程落地：尺寸链与GD&T、装配公差预算、DFM/DFA评审要点、样机验证与问题闭环。结合 2–3 个典型产品（小家电/智能穿戴/玩具机构）进行结构方案推演与装配可行性评估，完成三维装配模型、工程图与BOM的交付。考核由阶段作业（40%）+ 期中结构小作业（20%）+ 期末小组项目（40%）构成，重点评价设计合理性、工程完整度与团队协作。
                        </div>
                    </div>
                    <div class="right-class-box">
                        <div class="tops">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程教师</div>
                            </div>
                        </div>
                        <div class="teacher-box">
                            <img src="@/assets/avatar.png" alt="">
                            <div class="user-box">
                                <span class="title">颜彤 教授</span>
                                <span class="sub-title">教师是灵魂的灯塔，照亮学子前行的道路。</span>
                            </div>
                        </div>
                    </div>
                    <div class="right-class-box">
                        <div class="tops instructions">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程背景</div>
                            </div>
                            <div class="edit-btn">
                                <!-- <el-button type="primary" @click="editShow(2)">
                                    <el-icon size="20"><Edit /></el-icon>
                                    <span>编辑</span>
                                </el-button> -->
                            </div>
                        </div>
                        <div class="desc">
                            新质生产力背景下，产品从“造型驱动”走向“工程落地与体验并重”。工业设计专业学生亟需掌握可制造的结构设计与工程协同能力。本课程面向“设计—工程—制造”一体化培养目标，弥补学生在结构与公差、装配与工艺方面的短板，提升与机械/电子/制造团队沟通协作的效率。
                        </div>
                        <!-- <div class="nodata"> 暂无课程背景 </div> -->
                    </div>
                    <div class="right-class-box">
                        <div class="tops">
                            <div class="mubiao">
                                <div class="class-title">
                                    <div class="left"></div>
                                    <div class="right">课程目标</div>
                                </div>
                                <div class="edit-btn">
                                    <!-- <el-button type="primary" @click="addTarget">
                                        <el-icon size="20"><CirclePlus /></el-icon>
                                        <span>新建</span>
                                    </el-button> -->
                                </div>
                            </div>
                            <div class="desc-table">
                                <div class="table-item">
                                    <div class="tab-head">课程目标</div>
                                    <div class="tab-head">培养目标</div>
                                    <div class="tab-head">课程目标描述</div>
                                    <div class="tab-head">操作</div>
                                </div>
                                <div class="table-item" v-for="(item,index) in mubiaoItem" :key="index">
                                    <div>{{ item.title }}</div>
                                    <div>{{ item.mubiao }}</div>
                                    <div class="desc">{{ item.desc }}</div>
                                    <!-- <div class="operation">
                                        <el-link type="success" underline="false">编辑</el-link>
                                        <div class="lines"></div>
                                        <el-link type="danger" underline="false" @click="deleTarge(index)">删除</el-link>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <!-- <div class="nodata"> 暂无课程说明 </div> -->
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="editDialog" :title="dialogTitle" width="50%">
            <div class="dialog-content" v-if="basicShow">
                <div class="form-list">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程名称</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-input v-model="input" placeholder="请输入主题" />
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程类型</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="专业基础课">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">学时/学分</div>
                        </div>
                        <div class="inputs study">
                            <el-input v-model="input" placeholder="请输入学时" />
                            <el-input v-model="input" placeholder="请输入学分" />
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程封面</div>
                        </div>
                        <div class="inputs study">
                            <el-upload class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <div class="form-list">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">所属专业</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="请选择专业">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程结构</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="章-节-知识点">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">前置课程</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="请选择前置课程">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程性质</div>
                        </div>
                        <div class="class-switch">
                            <div class="slider" :class="{'mode-1': courseNature === 0, 'mode-2': courseNature === 1}"  :style="sliderStyleCourse"></div>
                            <div class="switch-item" :class="{active: courseNature === 0}" @click="courseNature = 0">必修课</div>
                            <div class="switch-item" :class="{active: courseNature === 1}" @click="courseNature = 1">选修课</div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">授课方式</div>
                        </div>
                        <div class="class-switch">
                            <div class="slider" :class="{'mode-1': teachMethod === 0, 'mode-2': teachMethod === 1}"  :style="sliderStyleTeach"></div>
                            <div class="switch-item" :class="{active: teachMethod === 0}" @click="teachMethod = 0">项目式教学</div>
                            <div class="switch-item" :class="{active: teachMethod === 1}" @click="teachMethod = 1">章节式教学</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="editor">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
                <Editor style="height: 200px;text-align: left;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialog = false"> 取消 </el-button>
                    <el-button type="primary" @click="editDialog = false"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="addDialog" :title="dialogTitle" width="30%" top="25vh">
            <div class="add-dialog-content">
                <div class="add-form">
                    <div class="items">
                        <div class="text">课程目标</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="input" placeholder="请输入课程目标" />
                    </div>
                </div>
                <div class="add-form">
                    <div class="items">
                        <div class="text">培养要求</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="value" class="m-2" placeholder="请选择培养要求">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <div class="add-form">
                    <div class="items">
                        <div class="text">课程目标描述</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="value" class="m-2" placeholder="请输入课程目标描述">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialog = false"> 取消 </el-button>
                    <el-button type="primary" @click="addDialog = false"> 保存 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { computed,onBeforeUnmount, ref, shallowRef } from 'vue'
    import { Plus } from '@element-plus/icons-vue'
    // import { Edit,CirclePlus,Plus } from '@element-plus/icons-vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import '@wangeditor/editor/dist/css/style.css'
    // import { ElMessage } from 'element-plus'

    const teachMethod   = ref(0)
    const courseNature  = ref(0)
    const editDialog    = ref(false)
    const addDialog     = ref(false)
    const basicShow   = ref(true)
    const dialogTitle = ref('新增课程目标')
    const options = [ { value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', }, { value: 'Option3', label: 'Option3', }, { value: 'Option4', label: 'Option4', }, { value: 'Option5', label: 'Option5', }, ]

    const editorRef = shallowRef();
    const valueHtml = ref("<p>初始内容</p>");

    const toolbarConfig = {
        excludeKeys: ["uploadVideo", "fullScreen"],
    };
    const editorConfig = ref({
        placeholder: "请输入内容详情...",
        MENU_CONF: {} 
    });
    const handleCreated = (editor) => {
        editorRef.value = editor;
    };
    onBeforeUnmount(() => {
        if (!editorRef.value) return;
        editorRef.value.destroy();
    });

    const classItem = ref([
        {
            'title':'学校/机构',
            'desc':'沈阳工业大学',
        },
        {
            'title':'课程类型',
            'desc':'专业基础课',
        },
        {
            'title':'课程状态',
            'desc':'未发布',
        },
        {
            'title':'授课方式',
            'desc':'章节式教学',
        },
        {
            'title':'前置课程',
            'desc':'暂无',
        },
        {
            'title':'课程教师',
            'desc':'颜彤',
        }
    ])
    const mubiaoItem = ref([
        {
            'title':'知识目标',
            'mubiao':'夯实结构与工艺基础',
            'desc':'说出5类常用材料及其成形工艺的适用场景;掌握常见连接方式与基本计算/选型要点。',
        },
        {
            'title':'能力目标',
            'mubiao':'建模与装配验证',
            'desc':'能完成10+零件的参数化建模与装配;进行干涉/行程/强度的初步验证并输出改进建议。',
        },
        {
            'title':'工程目标',
            'mubiao':'尺寸链与公差设计',
            'desc':'独立完成关键尺寸链分析与公差标注(含GD&T)，装配一次合格率≥80%。',
        },
        {
            'title':'生产目标',
            'mubiao':'DFM/DFA实施',
            'desc':'按制造约束优化结构与分件方案，减少零件数量≥15%，装配时间下降≥10%。',
        },
        {
            'title':'项目目标',
            'mubiao':'文档与交付',
            'desc':'规范输出工程图、BOM、装配说明与变更记录，交付可生产级项目文档。',
        },
        {
            'title':'素养目标',
            'mubiao':'团队协作与伦理',
            'desc':'在跨学科小组中分工明确，按时评审与复盘，遵循知识产权与安全规范。',
        }
    ])
    // const editShow = (attr) => {
    //     editDialog.value = true;
    //     if( attr == 0 ){
    //         dialogTitle.value = '编辑课程简介'
    //         basicShow.value   = true;
    //     } else if( attr == 1 ){
    //         dialogTitle.value = '编辑课程说明'
    //         basicShow.value   = false;
    //     } else if( attr == 2 ){
    //         dialogTitle.value = '编辑课程背景'
    //         basicShow.value   = false;
    //     }
    // }

    // const addTarget = () => {
    //     dialogTitle.value = '新增课程目标'
    //     addDialog.value = true;
    // }

    // const deleTarge = () => {
    //     ElMessage({
    //         message: '已成功删除课程目标！',
    //         type: 'success',
    //     })
    // }
    
    const sliderStyleCourse = computed(() => ({
        width: `50%`,
        transform: `translateX(${courseNature.value * 100}%)`
    }));
    const sliderStyleTeach = computed(() => ({
        width: `50%`,
        transform: `translateX(${teachMethod.value * 100}%)`
    }));
</script>
<style scoped>
    .graph-box{background: #E2E6EF!important;width: 100%;height: 100%;}
    .detail-box{width: 100%;background: #fff;padding-top: 30px;padding-bottom: 30px;display: flex;flex-direction: row;}
    .left-box{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);max-width: 450px;max-height: 880px;border-radius: 20px;margin-left: 20px;padding: 0 30px 30px 20px;}
    .left-box .class-basic{padding-top: 30px;}
    .blue{color: #3869E7;border: 1px solid #3869E7;background: rgba(56,105,231,0.2);}
    .green{color: #217F10;border: 1px solid #5ACA45;background: rgba(90,202,69,0.2);}
    .orange{color: #E2B17B;border: 1px solid #E2B17B;background: rgba(226,177,123,0.1);}
    .left-content{width: 380px;margin: 0 auto;}
    .left-box .class-basic img{width: 100%;}
    .basic-title{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 18px;font-weight: 600;margin-top: 10px;}
    .basic-tage{display: flex;flex-direction: row;font-family: 微软雅黑, Microsoft YaHei, SimSun;justify-content: center;margin-top: 10px;}
    .basic-tage span{display: block;font-size: 14px;border-radius: 5px;width: 60px;height: 25px;line-height: 25px;text-align: center;margin-left: 20px;padding: 0 10px 0 10px;}
    .class-desc{max-width: 380px;max-height: 150px;background: #F4F8FE;margin: 20px auto;border-radius: 5px;padding-bottom: 20px;}
    .class-title{display: flex;flex-direction: row;align-items: center;}
    .left-box .class-title{padding-top: 10px;}
    .class-title .left{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .class-title .right{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;}
    .class-desc .desc{max-width: 350px;text-align: left;margin-left: 15px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;margin-top: 10px;}
    .desc-table{padding-bottom: 20px;}
    .desc-table .table-item{display: flex;flex-direction: row;justify-content: space-between;width: 100%;margin: 0 auto;padding: 10px 0px 10px 0px;}
    .desc-table .table-item:nth-child(odd) { background-color: #E9F0FD; }
    .desc-table .table-item:nth-child(even) { background-color: #F4F8FE; } 
    .desc-table .table-item:hover { background-color: #e6f7ff; transition: background-color 0.3s ease; }
    .desc-table .table-item .left{margin-left: 10px;}
    .desc-table .table-item .right{margin-right: 10px;}
    .left-box .edit-btn{ width: 150px;margin: 0 auto; }
    .right-box{margin-left: 40px;width: 75%;}
    .right-box .right-content{width: 100%;gap: 20px;display: flex;flex-direction: column;}
    .right-class-box{width: 100%;border: 1px solid #D9D9DF;border-radius: 10px;padding: 10px;}
    .mubiao{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
    .right-class-box .desc{margin: 10px;text-align: left;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;  }
    .right-class-box .edit-btn{margin-right: 20px;width: 100px;}
    .right-class-box .desc-table{margin-left: 10px;margin-top: 20px;width: calc(100% - 30px);}
    .right-class-box .desc-table .table-item{display: flex;flex-direction: row;align-items: center;}
    .right-class-box .desc-table .table-item .tab-head{ font-weight: 600; }
    .right-class-box .desc-table .table-item div{text-align: center;width: 25%;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;color: #000;font-weight: 400;}
    .right-class-box .desc-table .table-item .desc{text-align: left;}
    .right-class-box .desc-table .table-item .operation{display: flex;flex-direction: row;justify-content: center;align-items: center;}
    .right-class-box .desc-table .table-item .operation .lines{width: 1px;background: #D5D9EC;height: 15px;margin: 0 20px 0 20px;}
    .instructions{display: flex;flex-direction: row;justify-content: space-between;}
    .teacher-box{height: 150px;background: #fff;border-radius: 8px;display: flex;flex-direction: row;justify-content: start;align-items: center;gap: 20px;}
    .teacher-box img{width: 80px;height: 80px;}
    .teacher-box .user-box{display: flex;flex-direction: column;justify-content: center;align-items: start;gap: 10px;}
    .teacher-box .user-box .title{font-size: 20px;font-weight: 600;color: #1D173E;}
    .teacher-box .user-box .sub-title{font-size: 16px;font-weight: 400;color: #000000;}
    .right-class-box .nodata{color: #9397A5;font-size: 16px;font-weight: 400;text-align: left;margin-left: 10px;margin-top: 10px;padding-bottom: 10px;}
    .dialog-content{width: calc(100% - 20px);margin-left: 10px;margin-top: 10px;display: flex;flex-direction: row;justify-content: space-between;}
    .dialog-content .form-list{width: 48%;}
    .avatar-uploader .el-upload { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); }
    .avatar-uploader .el-upload:hover { border-color: var(--el-color-primary); }
    .el-icon.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
    .dialog-content .form-list {display: flex;flex-direction: column;}
    .dialog-content .form-list .form-item{ margin-top: 20px; }
    .dialog-content .form-list .form-item .items{ display: flex;flex-direction: row;align-items: center; }
    .dialog-content .form-list .form-item .items .text{ font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .dialog-content .form-list .form-item .items .reds{ color: red;margin-left: 5px; }
    .dialog-content .form-list .form-item .inputs{ margin-top: 10px; }
    .dialog-content .form-list .form-item .study{ display: flex;flex-direction: row;gap: 20px; }
    .class-switch{position: relative;}
    .class-switch .switch-item { cursor: pointer; position: relative; transition: color 0.3s ease; text-align: center; color: #7f8c8d;z-index: 2; }
    .slider { border-radius: 35px; height: 35px; background: #3869E7; z-index: 1; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: absolute; top: 0; }
    .switch-item.active { color: white; }
    .mode-1 { background: #1465E1; }
    .mode-2 { background: #1465E1; }
    .form-item .class-switch{display: flex;flex-direction: row;width: 40%;background: #F7F7F7;border-radius: 40px;margin-top: 10px;}
    .form-item .class-switch .switch-item{width: 50%;height: 35px;line-height: 35px;}
    .course-nature .editor{margin-top: 20px;}
    .add-dialog-content{display: flex;flex-direction: column;text-align: left;}
    .add-dialog-content .add-form{ width: calc(100% - 30px);margin: 10px auto; }
    .add-form .items{display: flex;flex-direction: row;gap: 10px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
    @media (max-width: 1920px) {
        .right-box{margin-left: 30px;width: 65%;}
    }
</style>